@import "../../src/assets/styles/style.scss";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 1px;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

:focus {
    outline: 1;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

nav ul,
li {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted #000;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

.el-input input {
    border: 0.5px solid rgba(240, 244, 255, 0.16);
}

.el-input.is-disabled .el-input__inner {
    background-color: #181c29 !important;
    border: 0.5px solid rgba(240, 244, 255, 0.16) !important;
}
.el-input__icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-input__inner,
.el-textarea__inner {
    // border: none;
    border: 0.5px solid !important;
    border-color: #363d4e !important;
    border-radius: 3px;

    &::placeholder {
        color: $textColor_6 !important;
    }

    &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #a4aab2 !important;
    }

    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: $textColor_6 !important;
    }

    &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: $textColor_6 !important;
    }

    &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: $textColor_6 !important;
    }

    &:hover {
        border-color: #8f9091 !important;
        // @include border_color('con-borderHoverColor');
    }

    &:focus {
        border-color: #3875ff !important;
        box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.2);
    }
}

.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus {
    border-color: #f22433 !important;
    box-shadow: 0 0 6px 2px rgba(242, 36, 51, 0.3);
}

::-webkit-input-placeholder {
    font-size: 14px;
    // color: #e6edff !important;
}

.el-table {
    border: unset; // table {

    //     margin-top: 16px;
    // }
    .el-table__header {
        border: unset;

        th {
            text-align: center;
            font-size: 0.875rem !important;
            color: rgba(240, 244, 255, 0.88) !important;
            border: none;
            background: #313747;
            padding: 8px 0;
            font-weight: 600 !important;
        }
    }

    .el-table__body-wrapper {
        // background: #252833!important;
        table {
            tr {
                td {
                    text-align: center;
                    font-size: 0.875rem !important;
                    color: rgba(240, 244, 255, 1) !important;
                }
            }
        }
    }

    .el-table__fixed-body-wrapper {
        table {
            td {
                text-align: center;
            }
        }
    }

    .el-loading-mask {
        // top: 55%;
    }

    .el-table__fixed-right::before,
    .el-table__fixed::before {
        background-color: transparent;
    }

    .colorBlock {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: skyblue;
        border: unset;
    }
}

.el-table::before {
    height: 0 !important;
}

.el-table--border::after {
    width: 0 !important;
}

.el-loading-mask {
    background-color: unset;

    //     svg {
    //         circle {
    //             stroke: aliceblue !important;
    //         }
    //     }
}

.el-time-panel,
.el-time-panel__footer {
    border: 0.5px solid rgba(240, 244, 255, 0.16) !important;
}

.el-pagination {
    input,
    button {
        background: unset !important;
        border: 1px solid #3e4652 !important;
    }

    .active {
        color: #ffffff !important;
    }

    .el-input {
        input {
            height: 22px;
        }

        .el-select__caret {
            line-height: 22px;
        }
    }
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: $n-fontColor !important;
    -webkit-box-shadow: 0 0 0px 1000px $n-backColor inset !important;
    background-color: $n-backColor;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
}

.el-select .el-tag__close.el-icon-close::before {
    color: white;
}

.el-popper {
    background: #232938;
    border: 1px solid #40455b;
    padding: 1px;

    .el-dropdown-menu__item {
        color: #808490;
    }

    .el-dropdown-menu__item:hover,
    .el-dropdown-menu__item.active,
    .el-dropdown-menu__item:focus {
        background: #181c29;
        box-shadow: 0px 1px 0px 0px rgba(64, 69, 91, 0.42);
        color: #3370ff;
    }

    .el-time-panel__content::after,
    .el-time-panel__content::before {
        border-top: 1px solid #656565;
        border-bottom: 1px solid #656565;
    }

    button {
        border: unset;
    }

    .popper__arrow {
        border-bottom-color: #717273 !important;
    }

    .el-time-range-picker__body {
        border-color: rgba(240, 244, 255, 0.16);
    }

    &[x-placement^="bottom"].el-dropdown-menu,
    &[x-placement^="bottom"].el-select-dropdown {
        .popper__arrow::after {
            border-bottom-color: #0c0e14;
        }
    }
}
.el-tooltip__popper {
    max-width: 280px !important;
    background-color: #0c0e14 !important;
    color: #d3d8e2 !important;
    border: 1px solid #40455b;
    line-height: 28px !important;
    font-size: 14px !important;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow {
    border-top-color: #40455b;
}
.el-tooltip__popper.is-dark[x-placement^="top"] .popper__arrow:after {
    bottom: 2px;
    border-top-color: #0c0e14 !important;
}

// 下拉框
.el-select-dropdown {
    background-color: #0c0e14;

    .el-select-dropdown__list {
        padding-top: 5px;
    }

    .el-select-dropdown__item,
    .el-dropdown-menu__item {
        color: #fff;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover,
    .el-dropdown-menu__item:hover,
    .el-select-dropdown__item.selected {
        background-color: #3875ff;
        // @include font_color('popover-hoverTXColor');
    }
}

.el-popover {
    padding: 0;
    min-width: 0 !important;
    color: white;
    min-width: 0 !important;
    line-height: 28px !important;
    cursor: pointer !important;
    text-align: center;
    border: 0.5px solid rgba(240, 244, 255, 0.16);
    .el-button--default {
        margin: 0;
    }

    .el-button-group {
        display: flex;
    }

    .el-upload .el-button--success {
        color: #3875ff;
    }
    .el-button {
        width: 64px;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        text-align: center;
        border: none;
        background-color: rgba(59, 67, 87, 0.64);
        &:hover {
            background-color: rgba(59, 67, 87, 1);
        }
    }
    .el-button--text {
        color: #3875ff;
    }
    .el-button--primary {
        color: #3875ff;
    }
    .el-button--danger {
        color: #f56c6c !important;
    }
    .new-button-group {
        flex-direction: column;
    }
    .buttons .el-button {
        color: white !important;
    }
    .new-button-group .el-button {
        width: unset;
        min-width: 60px;
        padding-top: 13px;
        padding-bottom: 13px;
        padding: 13px 6px;
        color: white;
    }
}

.scenePopper .el-button {
    background: #313747 !important;
    &:hover {
        background: #3b4357 !important;
    }
}

.initPopper {
    background: #313747;
}

.el-date-picker {
    .el-picker-panel__body {
        .el-date-picker__time-header {
            border-bottom: 1px solid rgba(240, 244, 255, 0.16) !important;
        }
    }

    .el-picker-panel__footer {
        border-top: 1px solid rgba(240, 244, 255, 0.16) !important;
    }
}

.el-button--default {
    background: #3b4357;
    color: #ffffff;
    border: 0.5px solid rgba(240, 244, 255, 0.16);
}

.el-message-box {
    width: calc(100% - 40px) !important;
    max-width: 400px;
    border: unset;
    padding: 0px;
    background: #232938;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    .el-message-box__header {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;

        .el-message-box__title {
            text-align: center;
            font-size: 20px;
            color: #f0f4ff;
        }

        .el-message-box__headerbtn {
            display: none;
        }
    }

    .el-message-box__content {
        display: flex;
        justify-content: center;
        padding: 0px 0px 30px;

        .iconfont {
            color: #ffffff;
        }
        .icongw-icon-tishi2 {
            font-size: 14px !important;
            background: #ff8f3a;
            padding: 3px;
            border-radius: 50%;
            &:before {
                padding-left: 0;
            }
        }
        .el-message-box__status + .el-message-box__message {
            padding-left: 32px;
        }
        .el-message-box__message {
            font-size: 16px;
            color: #f0f4ff;
            height: 40px;
            display: flex;
            align-items: center;
        }
        .el-message-box__input {
            padding: 0px;
        }
    }

    .el-message-box__btns {
        display: flex;
        height: 54px;
        padding: 0px;
        border-top: 1px solid #2e3138;

        .el-button {
            border: none;
            flex: 1;
            margin: 0px;
            background-color: transparent;
            color: #2669ec;
            font-size: 18px;
            font-weight: 600;

            &:first-child {
                border-radius: 0px 0px 0px 6px;
                border-right: 1px solid #2e3138;
            }
            &:last-child {
                border-radius: 0px 0px 6px 0px;
            }
        }
    }
}
.el-cascader-menu {
    border-right: 1px solid rgba(240, 244, 255, 0.16);
}

.el-tree {
    background: #252833;
}

.el-picker-panel {
    border: 0.5px solid rgba(240, 244, 255, 0.16);

    .el-picker-panel__body-wrapper {
        .el-date-range-picker__content {
            border-color: rgba(240, 244, 255, 0.16);

            .in-range {
                div {
                    background: #3b4357;
                }
            }
        }
    }
}

.el-checkbox {
    .el-checkbox__inner {
        border: 0.5px solid #3d4a63;
        background: transparent;
        &::after {
            border-color: #fff;
        }
        &::before {
            border-color: #fff;
        }
    }
}

.el-checkbox__input.is-indeterminate {
    .el-checkbox__inner {
        &::before {
            background-color: #fff;
        }
    }
}

.el-date-editor {
    background: #0c0e14 !important;

    input {
        background: #0c0e14 !important;
        font-size: 0.75rem !important;
    }
}

.el-date-picker__time-header,
.el-picker-panel__footer {
    border-color: rgba(240, 244, 255, 0.16);
}

.el-time-panel {
    left: auto;
    right: 0;
    .el-time-spinner__wrapper {
        overflow-x: hidden !important;
    }
}

.el-date-range-picker
    .el-picker-panel__body
    .el-date-range-picker__time-header {
    border-bottom: 1px solid rgba(240, 244, 255, 0.16);
}

.el-date-range-picker .el-picker-panel__sidebar {
    border-right: 1px solid rgba(240, 244, 255, 0.16) !important;
}

// 设备状态
// 离线
.NoCommunication {
    // color: linear-gradient(to bottom, #ffffff 2%, #9D9D9D 100%) !important;
    background: #9d9d9d !important;
}

// 正常
.CommunicationOK {
    // color: linear-gradient(to bottom, #ffffff 2%, #6AD16A 100%) !important;
    background: #6ad16a !important;
}

// 警告
.HaveAlarm {
    // color: linear-gradient(to bottom, #ffffff 2%, #F54C4C 100%) !important;
    background: #f22433 !important;
}

// 正在设置
.HaveSetParm {
    // color: linear-gradient(to bottom, #ffffff 2%, #ECD00C 100%) !important;
    background: #ecd00c !important;
}

// 正在初始化
.initial {
    // color: linear-gradient(to bottom, #ffffff 2%, #49CBF6 100%) !important;
    background: #49cbf6 !important;
}

// 撤防
.CheFang {
    // color: linear-gradient(to bottom, #ffffff 2%, #EF02F6 100%) !important;
    background: #ef02f6 !important;
}

// 双击热备
.BackUp {
    background: #f8901c !important;
}

// 首页历史记录
.index-historical {
    a {
        color: $textColor_3;

        &:hover {
            color: $btn-blue;
        }
    }
}

// 文字提示气泡框样式
// .el-tooltip__popper.is-dark {
//     background-color: #3b4357;
// }
// .el-tooltip__popper .popper__arrow {
//     overflow: hidden;
//     &::after {
//         background-color: #3b4357 !important;
//         border-color: #3b4357 !important;
//     }
// }

/* 滚动条样式 */

::-webkit-scrollbar {
    width: 0 !important;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: $n-frondLight;
    margin: 50px;
}

::-webkit-scrollbar-button:vertical:start {
    height: 10px;
    visibility: hidden;
}

::-webkit-scrollbar-button:vertical:end {
    height: 10px;
    visibility: hidden;
}

::-webkit-scrollbar-button:horizontal:start {
    height: 10px;
    visibility: hidden;
}

::-webkit-scrollbar-button:horizontal:end {
    height: 10px;
    visibility: hidden;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

.el-dialog {
    .el-dialog__footer {
        height: 64px;
        padding: 10px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        border-top: 0.5px solid rgba(240, 244, 255, 0.16);

        .dialog-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .el-button {
            color: #e6edff;
            padding-left: 10px;
            padding-right: 10px;
        }

        .el-button {
            width: 78px;
            height: 28px;
            line-height: 28px;
            padding: 0px !important;
            border: none;
            float: left;
            font-size: $fontH14;

            .el-icon-loading {
                line-height: 28px !important;
            }
        }

        .el-button:first-child,
        .el-button:nth-child(3) {
            background-color: #3b4357;
            border: 1px solid rgba(240, 244, 255, 0.16);
        }

        .el-button:first-child:hover,
        .el-button:nth-child(3):hover {
            background: #495165;
        }

        .el-button:nth-child(2) {
            color: #e6edff;
        }

        button:nth-child(3) {
            padding: 0 14px;
        }
    }
}

.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
    background-color: #485065 !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: unset !important;
}

.el-switch {
    // .el-switch__label {
    //     @include font_color('con-textColor10');
    // }

    .el-switch__core {
        width: 56px !important;
        height: 26px;
        border-radius: 13px;
        border: 1px solid;
        background: #121927;
        border-color: #3d4a63;
        // @include background_color("switch-bgColor");
        // @include border_color("input-borderColor3");

        &:after {
            width: 16px;
            height: 16px;
            // @include background_color("btn-txColor3");
            background: #ffffff;
            left: 6px;
            top: 4px;
            z-index: 99;
        }
    }

    // .el-switch__label--left {
    //     z-index: 9;
    //     transform: translateX(55px);

    //     &:not(.is-active) {
    //         &+span {
    //             @include background_color("switch-bgColor1");
    //         }
    //     }
    // }

    // .el-switch__label--right {
    //     transform: translateX(-55px);
    // }
}

.el-switch:not(.is-checked) {
    .el-switch__label--right {
        color: transparent !important;
    }
}

.el-switch.is-checked {
    .el-switch__label--left {
        color: transparent !important;
    }

    .el-switch__core {
        // @include background_color("switch-bgColor1");
        background-color: #337cef;

        &:after {
            left: 50px;
            z-index: 99;
        }
    }
}

.el-notification {
    border: none;
    background-color: rgba(49, 55, 71, 0.88);
    padding: 0;
    border-radius: 3px;
}

.el-notification .el-notification__group {
    width: calc(100% - 32px);
    margin-left: 24px;
    margin-right: 24px;
    cursor: pointer;
}

.el-notification .el-notification__title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    color: #f0f4ff;
}

.el-notification .el-notification__content {
    width: calc(100% - 16px);
    font-size: 14px;
    line-height: 14px;
    margin-top: 0;
    margin-bottom: 16px;
}

.el-notification .el-notification__content .msgText {
    color: rgba(240, 244, 255, 0.64);
}

.el-notification.alarm {
    border-left: 8px solid #f22433;
}

.el-notification.warning {
    border-left: 8px solid #f5bb36;
}

.el-notification.info {
    border-left: 8px solid #3875ff;
}

.el-notification.set {
    border-left: 8px solid #d6d6d6;
}

.el-notification.ziChan {
    border-left: 8px solid #63e03f;
}

@media (min-width: 1px) {
    html,
    body {
        font-size: 12px;
    }
}

@media (min-width: $screen-xs-max) {
    html,
    body {
        font-size: 12px;
    }
}

@media (min-width: $screen-sm-min) {
    html,
    body {
        font-size: 13px;
    }
}

@media (min-width: $screen-md-min) {
    html,
    body {
        font-size: 14px;
    }
}

@media (min-width: $screen-lg-min) {
    html,
    body {
        font-size: 16px;
    }
}
